<template>
   <div>
   <h3>登录</h3>
   <hr>
   <!-- logo区域 -->
  <div class="logo">
   <van-image class="logo-img" position="center" fit="cover" round width="100px" height="100px"
 src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" />
   <h2>名称：xxxxxx</h2>
  </div>
   <!-- 输入框 -->
   <van-cell-group inset>
   <!-- 输入手机号，调起手机号键盘 -->
   <van-field class="input" left-icon="user-circle-o" placeholder="请输入手机号" type="tel"
   label="手机号" />
   <!-- 输入密码 -->
 <van-field class="input pwd" left-icon="closed-eye" placeholder="输入登录密码" type="password"
 label="密码" />
  </van-cell-group>
  <br><br>
  <div>
   <van-button class="btn" size="large">登录</van-button>
  <div class="login-wz">
   <span @click="$router.push('/register')">立即注册</span>
   <span @click="$router.push('/forget')">忘记密码</span>
   </div>
   </div>
   </div>
  </template>
  
  <script setup lang="ts"> 
  </script>
  
  <style scoped lang="scss">
  .input{
    border-bottom: 1px solid gray;
  
  }
  h3 {
   color: #111;
   text-align: center;
   padding: 10px;
  }
  
  .logo {
  position: relative;
  margin: 0 auto;
  width: 200px;
  height: 200px;
  }
  
  .logo-img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  }
  .login-wz{
  color: #666;
  display: flex;
  justify-content: space-between;
  padding: 10px;
  margin: 0 auto;
  width: 320px;
  font-size: 14px;
   
  }
  .btn{
    background-color: #BA6608;
    color: #fff;
    width: 320px;
    display: block;
    margin: 0 auto;
    margin-top: 35px;
    
  }
  .pwd{
    margin-top:15px;
  }
  </style>
